<template>
  <el-aside class="aside" :style="{ width: isCollapse ? '65px' : '210px' }">
    <div class="aside-box" >
      <div class="logo" v-if="isCollapse">
        <span class="logo-text">
          <img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
        </span>
      </div>

      <div class="logo" v-else>
        <img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
        <span class="txts">{{ BASE_TITLE }}</span>
      </div>
    </div>

    <el-scrollbar
      class="el-scrollbar"
    >
      <el-menu
        class="el-menu"
        :defaultActive="activeMenu"
        @select="onSelect"
        :collapse="isCollapse"
      >
        <SubMenu :menuList="menuList" />
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup lang="ts" name="login">
import { useGlobalStore } from "@/stores/modules/global";
import { BASE_TITLE } from "@/config";
import { ElAside, ElMenu, ElScrollbar } from "element-plus";
import { computed } from "vue";
import { useMenuStore } from "@/stores/modules/menu";
import { useRoute, useRouter } from "vue-router";
import "./aside.scss";
import SubMenu from "./components/SubMenu/SubMenu.vue";

const menuStore = useMenuStore();
const globalStore = useGlobalStore();
const menuList = computed(() => menuStore.showMenuListGet);
const route = useRoute();
const router = useRouter();
const isCollapse = computed(() => globalStore.isCollapse);
const activeMenu = computed(
  () => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string
);

const onSelect = (data: string) => {
  router.push({ path: data });
};

// const useImportImage = (path: string) => {
//   return new URL(path, import.meta.url).href;
// };
</script>

<style scoped lang="scss">
@import "./aside.scss";
</style>
